<template>
	<view>
		<view class="sound-box">
			<uni-icons class="sound-icon" size="20" type="scan" @click="scan"/>
			<input class="ipt" focus placeholder="请输入或者扫描音响设备编码" v-if="bindFlag == false"  v-model="soundCode" />
			<input class="ipt" focus placeholder="请输入或者扫描音响设备编码" v-if="bindFlag == true" disabled v-model="soundCode" />
		</view>
		<button type="primary" class="bind-btn" v-if="bindFlag == false" @click="bindSound">绑定</button>
		<button type="warn" class="bind-btn" v-if="bindFlag == true" @click="unbindSound">解除绑定</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				soundCode : "",
				mainid : "",
				bindFlag : false
			};
		},
		onLoad() {
			var _this = this;
			uni.getStorage({
				key: 'user',
				success: function(res) {
					_this.mainid = res.data.id;
					_this.searchBindSound();
				}
			});
		},
		methods: {
			scan(){
				if(this.bindFlag == true){
					return;
				}
				var _this = this;
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						_this.soundCode = res.result;
					}
				});
			},
			// 绑定音响
			bindSound(){
				uni.request({
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
					},
					url: getApp().globalData.url + 'mch/bindAudio/' + this.mainid + '/' + this.soundCode, 
					method: 'POST',
					data: {
						mchId: this.mainid,
						deviceId: this.soundCode
					},
					success: (res) => {
						uni.hideLoading(); //关闭加载动画
						console.log('绑定：',res);
						if (res.data.status == '200') {
							var _this = this;
							uni.showToast({
								title: "绑定成功",
								icon: 'none',
								duration: 2000,
								success: (() => {
									_this.searchBindSound();
								})
							});
						}else{
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: (error) => {
						console.log(error)
					}
				});
			},
			// 解除绑定音响
			unbindSound(){
				uni.request({
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
					},
					url: getApp().globalData.url + 'mch/liftBindAudio/' + this.mainid + '/' + this.soundCode, 
					method: 'POST',
					data: {
						mchId: this.mainid,
						deviceId: this.soundCode
					},
					success: (res) => {
						uni.hideLoading(); //关闭加载动画
						console.log('绑定：',res);
						if (res.data.status == '200') {
							var _this = this;
							uni.showToast({
								title: "解除绑定成功",
								icon: 'none',
								duration: 2000,
								success: (() => {
									_this.searchBindSound();
								})
							});
						}else{
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: (error) => {
						console.log(error)
					}
				});
			},
			// 查询绑定的音响
			searchBindSound(){
				uni.request({
					header: {
						"Content-Type": "application/x-www-form-urlencoded", 
					},
					url: getApp().globalData.url + 'mch/getAudioInfo/' + this.mainid, 
					method: 'POST',
					data: {
						mchId: this.mainid
					},
					success: (res) => {
						uni.hideLoading(); //关闭加载动画
						console.log('查询绑定：',res);
						if (res.data.status == '200') {
							if(res.data.data && res.data.data.deviceName.length > 0){
								this.soundCode = res.data.data.deviceName;
								this.bindFlag = true;
							}else{
								this.soundCode = "";
								this.bindFlag = false;
							}
						}else{
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							});
						}
					},
					fail: (error) => {
						console.log(error)
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sound-box{
		display: flex;
		justify-content: space-around;
		height: 100rpx;
		align-items: center;
		background-color: #FFFFFF;
		.ipt{
			height: 80rpx;
			width: calc(100% - 80rpx);
		}
		.sound-icon{
			width: 80rpx;
			height: 80rpx;display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}
	.bind-btn{
		height: 80rpx;
		width: 80%;
		margin: 80rpx 10%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
	}
</style>
